/**
 * Created by 荆安喜 on 2017/10/19.
 */
$(function () {
    var ad = appData(),
        tml = {
            panel: "{{each(i,val) databaseS}}\n<div class=\"source-box\" style=\"width:100%\">\n    <div class=\"source-item\">\n        <p><strong>{{= val.ip}}</strong><strong title=\"IP\">{{= val.name}}</strong> <em class=\"badge badge-gray\">{{= val.number}}</em></p>\n        <ul  id=\"{{= id}}\">\n            {{each(i,val) item}}\n            <li id=\"{{= val.id}}\"><span class=\"short\">{{= val.name}}</span><strong title=\"IP\">{{= val.ip}}</strong><em class=\"icons\"><a href=\"#\"  title=\"修改\"><i class=\"icon-setting\"></i></a><a href=\"#\" title=\"删除\"><i class=\"icon-delete\"></i></a></em></li>\n            {{/each}}\n        </ul>\n    </div>\n</div>\n{{/each}}",
            unknown: "<div class=\"source-box\" style=\"width:100%\">\n    <div class=\"source-item\">\n        <p><strong>{{= unknown.name}}</strong> <em class=\"badge badge-danger\">{{= unknown.number}}</em></p>\n        <ul  id=\"{{= unknown.id}}\">\n            {{each(i,val) unknown.item}}\n            <li id=\"{{= val.id}}\"><span class=\"short\">{{= val.name}}</span><strong title=\"IP\">{{= val.ip}}</strong> <em class=\"icons\"><a href=\"#\"  title=\"修改\"><i class=\"icon-setting\"></i></a></em></li>\n            {{/each}}\n        </ul>\n    </div>\n</div>\n",
            del: "<a href='#' title='删除'><i class='icon-delete'></i></a>",
        }


    $(function () {
        //初始化值
        drawPage()
        $('#jumpUrl').on('click',function () {
            window.open(window.location.href+'?page=views/safeApp/sysManage/sysServer')
        })
    })

    //注册事件
    function eventDo(data) {
        var selfId

        //下来选项
        $(".source-item").on("click", "strong", function () {
            if ($(this).parents(".source-item").hasClass('open')) {
                $(this).parents(".source-item").removeClass('open');
                $(this).parent().next("ul").show();
            }
            else {
                $(this).parents(".source-item").addClass('open');
                $(this).parent().next("ul").hide();
            }
        })


        $(".source-item li ").on("click", "a[title='修改']", function () {
            var id = selfId = this.parentElement.parentElement.id.replace(/_/g,'.')
            $('#editName').val('')
            $('#editText').val('')
            ad.sel('KMGA_DATA_OBJECT', {id: id}, function (data) {
                $('#editIP').html('IP 地址：' + data.id)
                $('#editName').val(data.name)
                $('#editText').val(data.text)
                $("#edit").show();
            })

        })

        //对象删除操作
        $(".source-item li ").on("click", "a[title='删除']", function () {
            var id = this.parentElement.parentElement.id
            var unknownId = data.unknown.id
            var fromId = this.parentElement.parentElement.parentElement.id
            var parms = {
                fromTerminal: fromId,
                id: id,
                toTerminal: unknownId
            }
            //统一的拖拽接口
            saveDrag(parms)
            
            var str = $('#' + id)
            $('#' + id).find("a[title='删除']").remove()
            $('#' + unknownId).append(str)

        })


        $(".dialog .close,#cancel").on("click", function () {
            $(".dialog").hide();
        })


        //注册拖拽事件
        data.databaseS.forEach(function (d, i) {
            drag(d.id, true, data.unknown.id)
        })
        drag(data.unknown.id, false, data.unknown.id)


        //注册保存事件
        $('#save').on('click', saveClient)


        //保存终端
        function saveClient() {
            var parms = {
                id: selfId,
                name: $('#editName').val(),
                text: $('#editText').val(),
            }
            parms.id=parms.id.replace('_','.')
            ad.insert('KMGA_DATA_OBJECTSAVE', parms, function () {
                $(".dialog").hide();
                drawPage()
            })

        }
    }


    function byId(id) {
        return document.getElementById(id);
    }

    //拖拽事件注册函数
    function drag(id, judge, unknownId) {
        Sortable.create(byId(id), {
            group: {
                name: 'advanced',
                pull: true,
                put: true
            },
            animation: 150,
            onEnd: function (evet) {
                var fromId = evet.from.id
                var selfId = evet.item.id
                var toId = evet.item.parentElement.id
                var parms = {
                    fromTerminal: fromId,
                    id: selfId,
                    toTerminal: toId
                }
                saveDrag(parms)
                if(toId==unknownId){
                    $('#' + selfId).find("a[title='删除']").remove()
                }
                if (unknownId == fromId) {
                    addDelete(selfId)
                }
            }
        })
    }

    //拖拽后台保存事件
    function saveDrag(parms) {
        parms.id=parms.id.replace(/_/g,'.')
        ad.insert('KMGA_DATA_STATE', parms, function () {
            drawPage()
        })
    }

    //动态添加删除按钮与事件
    function addDelete(id) {
        $('#' + id).find('em').append(tml.del)
    }

    //渲染页面
    function drawPage() {
        ad.selectList('KMGA_DATA_DATACLIENT', {}, function (data) {
            var d={
                databaseS:data.legalTerminal,
                unknown:data.illegalTerminal
            }
            $('#datasource9').empty()
            $('#datasource3').empty()
            $.tmpl(tml.panel, d).appendTo("#datasource9");
            $.tmpl(tml.unknown, d).appendTo("#datasource3");
            drawIp(data.illegalTerminal)
            eventDo(d)
        })
    }

    //渲染未知红色IP
    function drawIp(data) {
        var str=``
        data.newItem.forEach(function (d,i) {
            str=str+ `<li id="${d.id}"><span class="new"><i class="icon-notifications-on" title="不再提醒"></i>${d.name} </span><strong>${d.ip}</strong><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>`
        })
        $('#'+data.id).prepend(str)
        $(".icon-notifications-on").on('click',  function() {
            var id =this.parentElement.parentElement.id.replace(/_/g,'.')
            ad.selectList('KMGA_CLICK_OBJECTSAVE',{id:id},function () {
                drawPage()
            })
          //  $(this).parents().removeClass('new').end().remove();
        });
    }

})